<template>
  <el-card :body-style="{ padding: '25px' }" shadow="hover">
    <div class="item_center">
      <el-image style="width: 220px; height: 200px;margin: 0 auto" :src="$img+props.skuInfo.skuDefaultImg" fit="fill">
        <template #error>
          <div class="image-slot">
            <el-icon>
              <icon-picture/>
            </el-icon>
          </div>
        </template>
      </el-image>
    </div>
    <div style="margin-top: 20px">
      <div class="text_omit">
        <span>{{ props.skuInfo.skuTitle }}</span>
      </div>
      <div style="display: flex;justify-content: space-between;margin-top: 10px">
        <el-text class="mx-1" type="danger" tag="b" style="font-size: larger">￥{{ props.skuInfo.skuPrice }}</el-text>
        <el-text style="font-size: small">已售{{ props.skuInfo.saleCount || 0 }}件</el-text>
      </div>
    </div>
  </el-card>
</template>

<script setup>
let props = defineProps(['skuInfo'])

</script>

<style scoped>
.item_center {
  display: flex;
  justify-content: center;
}

.text_omit {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
}
</style>
